import React, { Component } from "react";
import { Statistic, Card, Row, Col } from 'antd';
import { ArrowUpOutlined } from '@ant-design/icons';
// API
// import { getAccountDetail } from "@/api/account";
// import { AliyunEcsNumberApi } from "@api/raycloud";
// http
import http from '../../utils/request';
// charts
// import SasGrade from "./charts/sas";
import EcsType from "./charts/ecs_type";
import moment from 'moment';

const { Countdown } = Statistic;
const deadline_1111 = moment("2022-11-11").format("YYYY-MM-DD");
const deadline_618 = moment("2022-06-18").format("YYYY-MM-DD");

class Dashboard extends Component {
    constructor(props){
        super(props);
        this.state = {
          machines_number: null,
          sas_data: []
        };
    }

    async componentDidMount() {
      this.load_sasData()
    }

    async load_sasData() {
      await http.get('/machine/statistical').then(response => {
        console.log(response.data.data)
        const respData = response.data.data
          this.setState({ 
            loading: false, 
            machines_number: respData.total,
        })
      })
    }

    render(){
      const { machines_number } = this.state
        return (
            <div className="site-statistic-demo-card">
              <Row gutter={2}>
                <Col span={6}>
                  <Card>
                    <Statistic
                      title="ECS"
                      value={machines_number}
                      valueStyle={{ color: '#3f8600' }}
                      suffix="台"
                    />
                  </Card>
                </Col>
                <Col span={6}>
                  <Card>
                    <Statistic
                      title="RDS"
                      value={machines_number}
                      valueStyle={{ color: '#3f8600' }}
                      suffix="台"
                    />
                  </Card>
                </Col>
                <Col span={6}>
                  <Card>
                    <Statistic
                      title="正在告警"
                      value={machines_number}
                      valueStyle={{ color: '#cf1322' }}
                      suffix=""
                    />
                  </Card>
                </Col>
                <Col span={6}>
                  <Card>
                    <Statistic
                      title="日增长"
                      value={9.3}
                      precision={2}
                      valueStyle={{ color: '#cf1322' }}
                      prefix={<ArrowUpOutlined />}
                      suffix="%"
                    />
                  </Card>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={12} style={{ marginTop: 12 }}>
                  <Card>
                    <Countdown title="双11倒计时" value={deadline_1111} format="D 天 H 时 m 分 s 秒" />
                  </Card>
                </Col>
                <Col span={12} style={{ marginTop: 12 }}>
                  <Card>
                    <Countdown title="618倒计时" value={deadline_618} format="D 天 HH:mm:ss:SSS" />
                  </Card>
                </Col>
              </Row>
              <Row gutter={16} style={{ marginTop: 12 }}>
                <Col span={12}>
                  <Card>
                    <EcsType />
                  </Card>
                </Col>
                <Col span={12}>
                  <Card>
                    <EcsType />
                  </Card>
                </Col>
              </Row>
            </div>
        )
    }
}

export default Dashboard;